<template>
	<view class="container">
		<!-- <swiper class="screen-swiper"
				:class="dotStyle?'square-dot':'round-dot'" 
				:indicator-dots="true" 
				:circular="true"
				:autoplay="true" 
				:interval="interval" 
				duration="500">
			<swiper-item v-for="(item,index) in indexImgList" :key="item.id">
				<image :src="item.src" mode="aspectFill" ></image>
			</swiper-item>
		</swiper> -->
		
		<swiper class="card-swiper" 
			 :class="dotStyle?'square-dot':'round-dot'" 
			 :indicator-dots="true" 
			 :circular="true"
			 :autoplay="true" 
			 :interval="interval" 
			 duration="500" 
			 @change="cardSwiper"
			 ndicator-color="#8799a3"
		 indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in indexImgList" :key="item.id" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.src" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 四个小功能 -->
		<view class="gridOp">
			<view class="gridOp_Icon" v-for="(item,index) in opList" :key="index" @click="option(item.id)">
				<view>
					<image :src="item.src" class="gridOp_Img"></image>
				</view>
				<text class="gridOp_Text">{{item.text}}</text>
			</view>
		</view>
		<view class="myApply">
			<view class="myApplyTitle">
				我的申请
			</view>
			<view class="applyStateContainer">
				<block v-for="(item,index) in stateList" :key='index'>
					<view class="applyIng" @tap="applyIng(item.id)">
						<image :src="item.stateImg" class="applyStateImg"></image>
						<view class="appyStateText">{{item.stateText}}</view>
						<view class="rightHead">
							<view class="lg text-gray cuIcon-right , stateHeadImg"></view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import { LSHM , indexImgList ,leaveOpList } from '../../data/data.js'
	export default{
		data(){
			return{
				cardCur: 0,
				dotStyle: false,
				// 轮播切换时间
				interval: 2000,				
				indexImgList:indexImgList,
				opList:LSHM,
				stateList:leaveOpList,
			}
		},
		onLoad(){
			// 防止页面刷新数据消失
			this.$reoladUser();
		},
		methods:{
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			option(id){
				switch (id) {
					case 1:
					// 请假
						uni.navigateTo({url:"/pages/component/leaveInfo"})
						break;
					case 2:
					// 存档
						uni.navigateTo({url:"/pages/component/editLeave"})
						break;
					case 3:
					// 历史
						uni.navigateTo({url:"/pages/component/historyLeave"})
						break;
					case 4:
						uni.showModal({content: '更多功能有待开发'});
						break;
					default:
						break;
				}
			},
			applyIng(id){
				// console.log(id)
				switch(id){
					case 1:
					// 待审批
						uni.navigateTo({url:"/pages/component/applyIngList"})
						break;
					case 2:
					// 已通过
						uni.navigateTo({url:"/pages/component/applyPassList"})
						break;
					case 3:
					// 已拒绝
						uni.navigateTo({url:"/pages/component/applyRefuseList"})
						break;
					default:
						break;
					
				}
			},
		}
	}
</script>
<style>
	.container{
		width: 100%;
		height: 100%;
		background-color: rgba(248, 248, 249, 1.0);
	}
	.gridOp {
		width: 100%;
		height: 170upx;
		text-align: center;
		background-color: white;
		padding-top: 20upx;
		margin-top: 30upx;
	}
	.gridOp_Icon {
		display: inline-block;
		width: 25%;
		text-align: center;
	}
	.gridOp_includeImg {
		width: 100rpx;
		height: 100rpx;
		margin: auto;
		text-align: center;
		background-color:rgba(229,46,40,1);
		border-radius: 50%;
		/* // padding: 15rpx; */
	}
	.gridOp_Img {
		width: 100rpx;
		height: 100rpx;
	}
	.gridOp_Text {
		font-size: 27rpx;
		color: rgba(126, 136, 136, 1);
		font-weight: 500;
	}
	.myApply{
		margin-top: 20upx;
	}
	.myApplyTitle{
		font-size: 30upx;
		color: grey;
		margin-left: 20upx;
	}
	.applyStateContainer{
		width: 100%;
		/* height: 300upx; */
		background-color: white;
		padding: 10upx 20upx 20upx 20upx;
		border-top: 1px solid rgba(237,237,240,1);
		border-bottom: 1px solid rgba(237,237,240,1);
	}
	.applyIng{
		width: 100%;
		height: 90upx;
		display: flex;
		border-bottom: 1px solid rgba(228, 232, 236, 1.0);
		padding-top: 10upx;
		padding-bottom: 20upx;
		/* position: relative; */
	}
	.applyIng:last-child{
		height: 60upx;
		border-bottom: 0;
	}
	.applyStateImg{
		width: 60upx;
		height: 60upx;
		border-radius: 0.4em;
		float: left;
	}
	.appyStateText{
		font-size: 30upx;
		height: 60upx;
		line-height: 60upx;
		font-weight: 600;
		margin-left: 36upx;
	}
	.rightHead{
		position: absolute;
		height: 60upx;
		width: 60upx;
		right: 10upx;
		line-height: 60upx;
	}
	.stateHeadImg{
		font-size: 40upx;
	}
</style>
